<template>
    <div style="text-align:center;margin-top:150px">
        <div style="font-size:25px;color:blue">中层干部考评系统</div>
        <el-form :model="info" :inline="true">
            <div style="margin-top:30px; ;height:10px">
                <div style="margin-top:30px; width:220px; margin-left:90px">
                    <el-input placeholder="请输入用户名" ref="on" :prefix-icon="User" type="text" v-model="info.username" @keydown.down="keydown"/>
                </div>
                <div style="margin-top:30px; width:220px; margin-left:90px">
                    <el-input placeholder="请输入密码" ref="next" :prefix-icon="Lock" type="password" v-model="info.password" @keyup.enter="handleSubmit" @keydown.up="keyup"/>
                </div>
                <el-row>
                    <el-col :span="12" style="text-align:left">
                        <el-checkbox label="记住我" v-model="info.remember"></el-checkbox>
                    </el-col>
                </el-row>
                <div>
                        <el-button type="success" style="width:100px;margin-top:30px" @click="login()">登录</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script setup>
import { reactive,ref,getCurrentInstance } from 'vue'
import {User,Lock,EditPen} from '@element-plus/icons-vue'
import { get,post } from '@/utils/request.js'
import {ElMessage} from 'element-plus'
import router from '@/router'
import {userStore} from '@/stores/counter.js'

const {proxy} = getCurrentInstance()
const store=userStore()
const info = reactive({
  username: '',
  password: '',
  code: '',
  remember:false,
})
const login=()=>{
if(!info.username||!info.password){
ElMessage.warning('请输入用户名或密码')
}else{
post('/api/auth/login',{
  username: info.username,
  password: info.password,
  code: info.code,
  remember:info.remember
},(message)=>{
window.sessionStorage.setItem('token', message)
get('/user/getUser',(message)=>{
store.auth.user=message.nickname
store.auth.realname=message.realname
store.auth.role=message.role
store.auth.idd=message.id
router.push('/index')
},(message)=>{
store.auth.user=null
store.auth.realname=null
})
},(data)=>{
ElMessage.warning(data)
})
}
}

const reload=()=>{
info.imageUrl="http://localhost:8080/verify?" + new Date().getTime();
}

const handleSubmit=()=>{
login()
}

const keyup=()=>{
proxy.$refs.on.focus()
}

const keydown=()=>{
proxy.$refs.next.focus()
}

</script>
<style scoped>

</style>